<template>
	<view class="page" :class="tab_id == 1 ? 'page_wx' : ''">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>支付方式</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="tabs flex align-center justify-between">
			<view class="tabs_item" v-for="(v, k) in list" :key="k" :class="tab_id == v.id ? 'tabs_item_ac' : ''"
				@tap.stop="selectTabs(v.id)">{{v.name}}</view>
		</view>
		<template v-if="tab_id != 3">
			<view class="code_content">
				<view class="money flex align-center justify-center">
					<text>支付金额：</text>
					<text>
						<text class="money_1">￥</text>
						<text>{{money}}</text>
					</text>
				</view>
				<view class="code_img flex align-center justify-center">
					<u-loading v-if="isShow" size="32" color="#39AE55"></u-loading>
					<template v-else>
						<image v-if="tab_id == 1" :src='qrcode_url' mode="aspectFill"></image>
						<uv-qrcode v-if="tab_id == 2" ref="qrcode" size="540rpx" :value="alipay_qrcode"></uv-qrcode>
					</template>
				</view>
				<view class="code_tip">
					<text v-if="tab_id == 1">打开微信扫码支付金额</text>
					<text v-if="tab_id == 2">打开支付宝扫码支付金额</text>
				</view>
			</view>
			<view class="offline_text" @tap.stop="postOfflinePay">
				<text>不使用上述收款方式? 线下收款</text>
				<!-- <u-icon name="arrow-right" size="24"></u-icon> -->
			</view>
			<view v-if="tab_id == 1" class="down_btn flex align-center justify-center" @tap.stop="savePhoto">下载二维码</view>
		</template>
		<template v-else>
			<view class="code_content share_content">
				<view class="share_title">
					<view class="share_title_1">待支付</view>
					<view class="share_title_2">您有一笔1元的订单待支付请尽快支付哦~</view>
				</view>
				<view class="share_code">
					<image class="code_bg" :src='STATIC_URL+"472.png"'></image>
					<image class="share_code_img" :src='STATIC_URL+"473.png"'></image>
				</view>
				<view class="share_btn flex align-center justify-center" @tap.stop="show=true">分享给租客</view>
			</view>
		</template>

		<view style="height: 120rpx;" v-if="tab_id == 3"></view>


		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop="show=false">
					<view class="rect_title">
						<view class="rect_title_1">待支付</view>
						<view class="rect_title_2">您有一笔1元的订单待支付请尽快支付哦~</view>
					</view>
					<image class="rect_bg" :src='STATIC_URL+"472.png"'></image>
					<image class="rect_code_img" :src='STATIC_URL+"473.png"'></image>
				</view>
				<view class="share_bottom">
					<view class="share_list">
						<view class="share_item">
							<image class="share_item_img" :src='STATIC_URL+"455.png"'></image>
							<view class="share_item_text">发送给朋友</view>
						</view>
						<view class="share_item">
							<image class="share_item_img" :src='STATIC_URL+"455.png"'></image>
							<view class="share_item_text">收藏</view>
						</view>
						<view class="share_item">
							<image class="share_item_img" :src='STATIC_URL+"455.png"'></image>
							<view class="share_item_text">保存到相册</view>
						</view>
					</view>
					<view class="share_close flex align-center justify-center">取消</view>
				</view>
			</view>
		</u-mask>


		<u-modal v-model="receiveShow" content="已确认线下收款？" :show-cancel-button="true" confirm-color="#1A66FA" @confirm="receiveConfirm"></u-modal>
	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				show: false,
				list: [{
						name: '微信支付',
						id: 1
					},
					{
						name: '支付宝支付',
						id: 2
					},
					// {
					// 	name: '分享支付',
					// 	id: 3
					// }
				],
				tab_id: 1,
				order_id: "",
				money: 0,
				qrcode_url: "",
				isShow: true,
				alipay_qrcode: "",
				receiveShow: false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				order_id,
				money
			} = options;
			if (order_id !== undefined) this.order_id = order_id;
			// if (money !== undefined) this.money = money;
			// this.order_id = 9;
			this.nativePay();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 生成收款二维码   postNativePay
			nativePay() {
				this.$api.post(global.apiUrls.postNativePay, {
					order_id: this.order_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.money = res.data.data.need_pay;
						this.qrcode_url = res.data.data.qrcode_url;
						this.alipay_qrcode = res.data.data.alipay_qrcode;
					} else {
						this.$message.info(res.data.info);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
			},
			selectTabs(id) {
				this.tab_id = id;
				if (this.tab_id == 1) {
					this.isShow = true;
					setTimeout(() => {
						this.isShow = false;
					}, 800)
				}
				
			},
			savePhoto() {
				if (!this.qrcode_url) {
					this.$message.info('未获取到收款码图片');
					return;
				}
				let _this = this;
				uni.showLoading({
					title: '保存中'
				})
				// 先下载图片
				uni.downloadFile({
					url: _this.tab_id == 1 ? _this.qrcode_url : _this.alipay_qrcode,
					success: (res) => {
						// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.hideLoading();
								uni.showToast({
									title: "保存成功！",
								});
							},
							fail: () => {
								uni.hideLoading();
								uni.showToast({
									title: "保存失败",
								});
							},
						});
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: "保存失败",
						});
					}
				});
			},
			receiveConfirm() {
				uni.showLoading({
					title: '处理中'
				})
				this.$api.post(global.apiUrls.offlinePay, {
					order_id: this.order_id
				}).then(res => {
					uni.hideLoading();
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 线下支付  offlinePay
			postOfflinePay() {
				this.receiveShow = true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.warp {
		display: flex;
		justify-content: center;
		height: 100%;
		position: relative;
	}

	.rect {
		margin-top: 40rpx;
		width: 612rpx;
		height: 900rpx;
		position: relative;
		background: url(https://speed.zhongchuxing.com/gjdimages/474.png) no-repeat;
		background-size: 100% 100%;
		padding: 100rpx 24rpx 0;

		.rect_title {

			// padding: 46rpx 14rpx 44rpx;
			.rect_title_1 {
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
			}

			.rect_title_2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-top: 20rpx;
			}
		}

		.rect_bg {
			margin-top: 32rpx;
			width: 560rpx;
			height: 625rpx;
		}

		.rect_code_img {
			width: 182rpx;
			height: 182rpx;
			position: absolute;
			bottom: 60rpx;
			right: 28rpx;
		}
	}

	.share_bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 750rpx;
		border-radius: 32rpx 32rpx 0px 0px;
		background: #fff;

		.share_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f6f7fb;
			border-radius: 32rpx 32rpx 0 0;
			padding: 40rpx 100rpx;

			.share_item {
				text-align: center;

				.share_item_img {
					width: 84rpx;
					height: 84rpx;
				}

				.share_item_text {
					color: #666666;
					font-size: 24rpx;
					margin-top: 12rpx;
				}
			}
		}

		.share_close {
			width: 100%;
			height: 96rpx;
			font-size: 30rpx;
			font-weight: 500;
		}
	}

	.tabs {
		padding: 28rpx 28rpx 48rpx;

		.tabs_item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 220rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.4);
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.tabs_item_ac {
			background: #fff;
			color: #111;
		}
	}

	.code_content {
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.money {
			padding: 44rpx 0 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;

			.money_1 {
				font-size: 24rpx;
			}
		}

		.code_img {
			width: 540rpx;
			height: 540rpx;
			margin: 0 auto;
			border-radius: 8rpx;
			border: 2rpx solid #EEEEEE;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
		.upgrad {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			background: rgba(0, 0, 0, 0.3);
			color: #FFFFFF;
			font-size: 38rpx;
		}

		.code_tip {
			text-align: center;
			padding: 30rpx 0 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.offline_text {
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		margin: 46rpx 0 72rpx;
	}

	.down_btn {
		width: 436rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}

	.share_content {
		padding: 0 28rpx 74rpx;

		.share_title {
			padding: 46rpx 14rpx 44rpx;

			.share_title_1 {
				font-weight: bold;
				font-size: 40rpx;
				color: #222222;
			}

			.share_title_2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-top: 20rpx;
			}
		}

		.share_code {
			width: 100%;
			height: 714rpx;
			position: relative;

			.code_bg {
				width: 100%;
				height: 100%;
			}

			.share_code_img {
				width: 206rpx;
				height: 206rpx;
				position: absolute;
				bottom: 60rpx;
				right: 18rpx;
			}
		}

		.share_btn {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 36rpx auto 0;
		}
	}



	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.personalInformation_picker2_0_c2 {
		color: rgba(44, 143, 255, 1);
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #1A66FA;
		background-size: 100% auto !important;
	}

	.page_wx {
		background: #39AE55;
	}
</style>